<template>
    <div class="com-container" @dblclick="revertMap">
        <div class="com-chart" ref="Map">

        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
import { getProvinceMapInfo } from '@/utils/map_utils'
export default {
    data() {
        return {
            chartInstance: null,
            allData: null,
            mapData:[]
        }
    },
    methods: {
        //初始化地图
        async initEchart() {
            this.chartInstance = this.$echarts.init(this.$refs.Map, this.theme)
            const { data: res } = await axios.get("http://localhost:8899/static/map/china.json");
            this.$echarts.registerMap('china', res)
            const initOption = {
                title: {
                    text: "|商家分布",
                    left: 20,
                    top: 20
                },
                geo: {
                    type: 'map',
                    map: 'china',
                    top: '3%',
                    bottom: '3%',
                    itemStyle: {
                        areaColor: '#2E72BF',
                        borderColor: '#333'
                    }
                },
                legend: {
                    // 对图例的样式进行配置
                    left: '5%',
                    bottom: '5%',
                    orient: 'vertical'//竖着放
                }
            }
            this.chartInstance.setOption(initOption)
            this.chartInstance.on('click', async item => {
                //判断点击事件  拿到点击的省份
                //数据的缓存
                const provinceIfo = getProvinceMapInfo(item.name)
                console.log(provinceIfo)
                
                if(!this.mapData[provinceIfo.key]){
                const { data: res } = await axios.get('http://localhost:8899/' + provinceIfo.path)
                this.mapData[provinceIfo.key]=res
             
                this.$echarts.registerMap(provinceIfo.key, this.mapData[provinceIfo.key])
                }
                this.chartInstance.setOption({
                    geo: {
                        map: provinceIfo.key
                    }
                })
            })
            this.getScattetDate()
        },
        //获取散点图的数据
        async getScattetDate() {
            const { data: res } = await this.$http.get('map');
            this.allData = res;
            this.updataEchart()
        },
        //改变地图
        updataEchart() {
            //更新时处理图表需要的数据
            //图例数据
            const legendData = this.allData.map(item => {
                return item.name
            })
            console.log(this.allData)
            //散点数据
            const seriesArr = this.allData.map(item => {
                return {
                    type: 'effectScatter',
                    rippleEffect: {
                        scale: 10,//五个像素
                        brushType: 'stroke'//涟漪空心
                    },
                    coordinateSystem: 'geo',
                    name: item.name,
                    data: item.children
                }
            })
            console.log(seriesArr)
            const dataOption = {
                legend: {
                    data: legendData
                },
                series: seriesArr
            }
            this.chartInstance.setOption(dataOption)
        },
        //获取数据
        async getData() {
            //获取图表需要的数据

        },
        //监听地图大小
        resizeEcharts() {
            const titleFontSize = this.$refs.Map.offsetWidth / 100 * 3.6
            console.log(titleFontSize)
            const adapterOption = {
                title: {
                    textStyle: {
                        fontSize: titleFontSize
                    }
                },
                legend: {
                    itemWidth: titleFontSize / 2,
                    itemHeight: titleFontSize / 2,
                    itemGap: titleFontSize / 2,
                    textStyle: {
                        fontSize: titleFontSize / 2
                    }
                }
            }
            this.chartInstance.setOption(adapterOption);
            this.chartInstance.resize()
        },
        //双击返回中国地图
        revertMap() {
            this.chartInstance.setOption({
                geo: {
                    map: 'china'
                }
            })
        }

    },
    mounted() {
        this.initEchart()
        this.getData()
        window.addEventListener("resize", this.resizeEcharts);
        this.resizeEcharts()
        this.getScattetDate()
    },
    computed: {
    ...mapState(['theme'])

  },
    watch: {
    theme() {
      this.chartInstance.dispose()
      this.initEchart()
      this.resizeEcharts()
      this.updataEchart()
    }
  },
    //销毁实例
    destroyed() {
        window.removeEventListener('resize', this.resizeEcharts)
    },
}
</script>

<style>
</style>